<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>路由参数</title>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>Hello VueRouter</h1>
		<p>
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			<!-- <a href="user.html?userid=1&id=2>用户1</a>" -->
			<router-link to="/user/1">User1</router-link>
			<!-- <a href="user.html?userid=2>用户2</a>" -->
			<router-link to="/user/2">User2</router-link>
		</p>
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view></router-view>
	</div>

	<script type="text/javascript">
		const User = { template: '<div><h1>{{$route.params.userid}}</h1></div>' };

		const router = new VueRouter({
		  	routes: [
		  		{path: '/user/:userid', component: User}
		  	]
		})		

		const app = new Vue({
		  	router
		}).$mount('#app')					
	</script>
</body>
</html>